<template>
    <div class="row">
        <el-col :span="24">
            <h1>用户信息</h1>
        </el-col>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="用户id（电话）" width="180" />
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="userpassword" label="密码" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="birthday" label="生日" />
        <el-table-column prop="work" label="工作" />
        <el-table-column prop="intro" label="简介" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import axios from 'axios' //导入 Axios

export default {
    data() {
        return {
            tableData: [],
            componentKey: 0,
        }
    },
    created() {
        this.getAllUserData()
    },
    methods: {
        userSignup() {

        },
        handleDelete(userid) {
            const data = { "userid": userid }
            console.log(data);
            this.$axios.post('/index.php/Management/deleteFromUserData', data)
                .then(response => {
                    // 处理成功的响应
                    console.log(response.data.message);// 根据需要进行进一步处理
                    this.getAllUserData();

                })
                .catch(error => {
                    // 处理错误
                    console.error('There was an error!', error);
                    this.message = 'Error: ' + error.message;
                });
        },

        getAllUserData() {
            this.$axios.get('/index.php/Management/getAllUserData')
                .then(response => {
                    console.log("userwaitdata的请求状态：" + response.data.message);
                    console.log("userwaitdata请求到的数据：");
                    console.log(response.data.data);
                    this.tableData = response.data.data;
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    this.message = 'Error: ' + error.message;
                });
        },

    },


}
</script>